import React from 'react';
import {Card, Col, DatePicker, Row} from 'antd';

import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import {trigger} from "@/utils/utils";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import moment from "moment";
import LeftMainData from "./Left";
import RightMainData from "./Right";
import {connect} from "react-redux";


// const {RangePicker} = DatePicker;


class MainData extends React.Component{

  state = {
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    mainData: null,
  };


  getMainData = () =>{
    const payload = {
      start: dateFormat(this.state.startTime),
      end: dateFormat(this.state.endTime)
    };
    this.props.dispatch({
      type: 'fengxiang/getMainData',
      payload: payload,
    });
  };

  async componentDidMount(){
    const payload = await getMockTime("ShaoJie")
    this.setState({
      startTime:payload.start,
      endTime:payload.end
    })
    this.getMainData();
  }


  timePick = (value) => {
    this.state.startTime = value[0].toDate();
    this.state.endTime = value[1].toDate();
    this.getMainData()
  };

  render(){

    const {mainData, globalTime} = this.props;

    // const {startTime, endTime} = this.state;
    // const dateFormat = 'YYYY-MM-DD HH:mm:ss';

    return(
      <div>
        <Row>
          <Card
            style={{width:'100%'}}
            bordered={false}>
            <LeftMainData hasParent={true}
                          mainData={mainData}
                          globalTime={globalTime}
                          width={100}
                          height={300}/>
          </Card>
        </Row>
        <Row>
          <Card
            style={{width:'100%'}}
            bordered={false}>
            <RightMainData hasParent={true}
                           mainData={mainData}
                           globalTime={globalTime}
                           width={100}
                           height={300}/>
          </Card>
        </Row>
      </div>
    )
  }
}

export default connect(({fengxiang, loading, global}) => ({
  mainData: fengxiang.mainData,
  globalTime: fengxiang.globalTime,
  mainDataLoading: loading.effects["fengxiang/mainData"],
  global
}))(MainData);
